<%@include file="header.jsp"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div id="page-wrapper">
	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header">Phiếu xuất </h1>
		</div>
		<!-- /.col-lg-12 -->
	</div>
	
	<div class="row">
	
	<form action="saveorupdate" method="POST">
		<div class="col-lg-12">
				<c:if test="${errorMess != null}">
					<div class="alert alert-danger">
						<c:forEach items="errorMess">
						${errorMess} <p></p>
						</c:forEach>
					</div>
				</c:if>
				<div class="row">
					<div class="col-sm-6">
						<p> Chọn phòng ban </p>
						<select name="departmentId" class="form-control">
							<c:forEach items="${departmentList}" var="emp">
								<option id="${emp.departmentId}" value="${emp.departmentId}">${emp.departmentName}</option>
							</c:forEach>
						</select>
						<p> </p>
					</div>
				</div>
				<div class="panel panel panel-info">
				<div class="panel-heading">Danh sách văn phòng phẩm </div>
				<!-- /.panel-heading -->
				<div class="panel-body">
					<div class="table-responsive">
						<div id="dataTables-example_wrapper"
							class="dataTables_wrapper form-inline" role="grid">
							<div class="row">
 							</div>
							<table aria-describedby="dataTables-example_info"
								class="table table-striped table-bordered table-hover dataTable no-footer"
								id="dataTables-example">
								<thead>
									<tr role="row">
										<th aria-sort="ascending"
											aria-label="Rendering engine: activate to sort column ascending"
											style="width: 200px;" colspan="1" rowspan="1"
											aria-controls="dataTables-example" tabindex="0"
											class="sorting_asc"> Tên văn phòng phẩm</th>
											<th aria-sort="ascending"
											aria-label="Rendering engine: activate to sort column ascending"
											style="width: 200px;" colspan="1" rowspan="1"
											aria-controls="dataTables-example" tabindex="0"
											class="sorting_asc"> Số lượng</th>
<!-- 											<th aria-sort="ascending" -->
<!-- 											aria-label="Rendering engine: activate to sort column ascending" -->
<!-- 											style="width: 100px;" colspan="1" rowspan="1" -->
<!-- 											aria-controls="dataTables-example" tabindex="0" -->
<!-- 											class="sorting_asc"> Đơn giá </th> -->
<!-- 										<th aria-label="Browser: activate to sort column ascending" -->
<!-- 											style="width: 100px;" colspan="1" rowspan="1" -->
<!-- 											aria-controls="dataTables-example" tabindex="0" -->
<!-- 											class="sorting"> Thành giá</th> -->
<!-- 										<th -->
<!-- 											aria-label="Platform(s): activate to sort column ascending" -->
<!-- 											style="width: 100px;" colspan="1" rowspan="1" -->
<!-- 											aria-controls="dataTables-example" tabindex="0" -->
<!-- 											class="sorting"> Xóa </th> -->
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<div class="row">
								<div class="col-sm-6">
								<input class="btn btn-info btn-sm" type='button' value='Thêm sách' id='addButton'>
								</div>
							</div>
						</div>
					</div>
					<!-- /.table-responsive -->
				</div>
				<!-- /.panel-body -->
			</div>
			
			<div class="panel panel panel-info">
				<div class="panel-heading">Sách </div>
				<!-- /.panel-heading -->
				<div class="panel-body">
					<div class="table-responsive">
						<div id="dataTables-example_wrapper"
							class="dataTables_wrapper form-inline" role="grid">
							<div class="row">
 							</div>
 							
							<table aria-describedby="dataTables-example_info"
								class="table table-striped table-bordered table-hover dataTable no-footer"
								id="dataTables-example2">
								<thead>
									<tr role="row">
										<th aria-sort="ascending"
											aria-label="Rendering engine: activate to sort column ascending"
											style="width: 200px;" colspan="1" rowspan="1"
											aria-controls="dataTables-example" tabindex="0"
											class="sorting_asc"> Tên sách</th>
											<th aria-sort="ascending"
											aria-label="Rendering engine: activate to sort column ascending"
											style="width: 200px;" colspan="1" rowspan="1"
											aria-controls="dataTables-example" tabindex="0"
											class="sorting_asc"> Số lượng </th>
<!-- 											<th aria-sort="ascending" -->
<!-- 											aria-label="Rendering engine: activate to sort column ascending" -->
<!-- 											style="width: 100px;" colspan="1" rowspan="1" -->
<!-- 											aria-controls="dataTables-example" tabindex="0" -->
<!-- 											class="sorting_asc"> Đơn giá </th> -->
<!-- 										<th aria-label="Browser: activate to sort column ascending" -->
<!-- 											style="width: 100px;" colspan="1" rowspan="1" -->
<!-- 											aria-controls="dataTables-example" tabindex="0" -->
<!-- 											class="sorting"> Thành giá</th> -->
<!-- 										<th -->
<!-- 											aria-label="Platform(s): activate to sort column ascending" -->
<!-- 											style="width: 100px;" colspan="1" rowspan="1" -->
<!-- 											aria-controls="dataTables-example" tabindex="0" -->
<!-- 											class="sorting"> Xóa </th> -->
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
							<div class="row">
								<div class="col-sm-6">
								<input class="btn btn-info btn-sm" type='button' value='Thêm sách' id='addButton2'>
								</div>
							</div>
						</div>
					</div>
					<!-- /.table-responsive -->
				</div>
				<!-- /.panel-body -->
			</div>
			
			<!-- /.panel -->
		</div>
		<!-- /.col-lg-12 -->
		<div class="col-sm-6">
			<input class="btn btn-success" type='submit' value='Hoàn thành'
				id='addButton2'>
		</div>
		</form>
	</div>
</div>
<!-- /#page-wrapper -->
<!-- /#wrapper -->
    <script src="<c:url value="/resources/js/jquery-1.10.2.js"/>"></script>
    <script src="<c:url value="/resources/js/bootstrap.min.js"/>"></script>
    <script src="<c:url value="/resources/js/plugins/metisMenu/jquery.metisMenu.js"/>"></script>
    <script src="<c:url value="/resources/js/sb-admin.js"/>"></script>
    <script src="<c:url value="/resources/js/plugins/dataTables/jquery.dataTables.js"/>"></script>
    <script src="<c:url value="/resources/js/plugins/dataTables/dataTables.bootstrap.js"/>"> </script>
 
<script type="text/javascript">
$(document).ready(function(){
	
	var bookCount = 0;
	var stationeryCount = 0;
	
	var rmbtm = '<input class="btn btn-info btn-sm" type="button" value="Xóa" id="rmButton2"></input>';
	
    $("#addButton2").click(function () {
    	bookCount++;
    	var inputbook ='<input class="form-control" type="text" name="bookQuantity' + bookCount + '"></input>';
    	var book = ('<tr id = "row' + bookCount + '"><td><select id ="bookId" name="bookId' + bookCount + '" class="form-control"><c:forEach items="${bookList}" var="emp"><option value="${emp.bookId}" id="${emp.bookPrice}">${emp.bookName}</option></c:forEach></select></td><td>' + inputbook +'</td></tr>');
		$('#dataTables-example2 tr:last').after(book);
     });
 
    $("#addButton").click(function () {
    	stationeryCount++;
    	var inputstationery ='<input class="form-control" type="text" name="stationeryQuantity' + stationeryCount + '"></input>';
     	var stationery = ('<tr><td><select name="stationeryId' + stationeryCount +'" class="form-control"><c:forEach items="${stationeryList}" var="emp"><option value="${emp.stationeryId}" id="${emp.stationeryPrice}">${emp.stationeryName}</option></c:forEach></select></td><td>' + inputstationery +'</td></tr>');
		$('#dataTables-example tr:last').after(stationery);
     });
    
     $("#rmButton2").click(function () {
		if(bookCount == 1){
          alert("Đã xóa hết");
          return false;
       	}   
		$('#row'+bookCount).remove();
		bookCount--;
     });

// 	$('#dataTables-example2 tr').click(function () {
// 	    $(this).remove();
// 	    return false;
// 	});
 
     $("#getButtonValue").click(function () {
 
	var msg = '';
	for(i=1; i<counter; i++){
   	  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
	}
    	  alert(msg);
     });
  });
</script>
</body>
</html>
